<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>拉起 APP 方式</title>
    <style>
      body {
        display: grid;
        place-items: center;
        margin: 0;
        height: 100%;
        color: #fff;
      }

      .bg {
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: -10;
        background: rgba(0, 0, 0, 0.6);
        text-align: end;
        overflow: hidden;
        padding: 1rem 5px 0 1rem;
      }

      .bg img {
        width: 93%;
        height: auto;
      }

      a,
      button {
        display: block;
        margin: 0.4rem 0;
      }
    </style>
  </head>
  <body>
    <div class="app">
      <div class="bg">
        <img src="https://i.postimg.cc/VkhH67D9/h5browser.png" alt="" />
      </div>
      <h2>我是自定义外链页面</h2>
      <div>
        <a href="https://www.baidu.com">点我跳 百度</a>
        <a href="https://www.hao123.com">点我跳 好123</a>
        <a href="https://m.bilibili.com">点我跳 哔哩哔哩</a>

        <!--音频（au号） bilibili://music/detail/567692 -->
        <!-- 视频（av号）bilibili://video/36695997 -->
        <button>
          <a href="bilibili://music">打开哔哩哔哩 App</a>
        </button>

        <button><a href="weixin://">打开微信 APP</a></button>

        <button><a href="alipays://">打开支付宝 APP</a></button>

        <button><a href="taobao://m.taobao.com">打开淘宝 APP</a></button>
        <!-- <button><a href="http://a.app.qq.com/o/simple.jsp?pkgname=com.taobao.taobao&source=tripshare_taobao_click">先查应用宝-淘宝</a></button> -->
        <!-- <button><a href="taobao://item.taobao.com/item.htm?id=671147831110">打开淘宝商品详情页</a></button> -->

        <!-- // 或者"mms://"; -->
        <button><a href="pinduoduo://">打开拼多多 APP</a></button>

        <button><a href="mqq://">打开 QQ</a></button>
        <!-- <a onclick="openElemeApp()">打开饿了么 APP</a> -->

        <button><a href="imeituan://">打开美团 APP</a></button>

        <button><a href="eleme://home">打开饿了么 APP</a></button>
        <button><a href="mqqbrowser://">打开 QQ浏览器 失败</a></button>
        <button>
          <a href="mttbrowser://url=https://www.qq.com"
            >只能用QQ浏览器打开 QQ浏览器</a
          >
        </button>

        <!-- <button><a href="openapp.jdmoble://">打开京东 APP</a></button> -->
        <!-- <button><a href="dianping://">打开点评 APP</a></button> -->

        <!-- 1号店： wccbyihaodian:// -->
        <!-- 微博： sinaweibo:// -->
        <!-- 腾讯微博： TencentWeibo:// -->
        <!-- weico微博： weico:// -->
        <!-- 知乎： zhihu:// -->
        <!-- 豆瓣fm： doubanradio:// -->
        <!-- 网易公开课： ntesopen:// -->
        <!-- Chrome： googlechrome://  -->
        <!-- uc浏览器： ucbrowser:// -->
        <!-- 百度浏览器：baiduboxapp://browse?url= -->
        <!-- 搜狗浏览器： SogouMSE:// -->
        <!-- 百度地图： baidumap:// bdmap:// -->
        <!-- 优酷： youku:// -->
        <!-- 人人： renren:// -->
        <!-- 我查查： wcc:// -->
        <!-- 有道词典： yddictproapp:// -->
        <!-- 微盘： sinavdisk:// -->
        <!-- 名片全能王： camcard:// -->
      </div>
    </div>

    <script>
      // function toMeituan() {
      //   window.location.href =
      //     "https://evt.dianping.com/synthesislink/6702.html?_fb_qa&_mv=123456&redirect=meituan://www.meituan.com?utm_campaign=baidu&utm_medium=organic&utm_source=baidu&utm_content=title-link"
      // }

      function is_neizhi() {
        const ua = navigator.userAgent
        if (ua.includes("MicroMessenger")) {
          return "微信内置浏览器"
        } else if (ua.includes("QQ/")) {
          return "QQ内置浏览器"
        } else if (ua.includes("QQ")) {
          return "QQ浏览器"
        } else if (ua.includes("Alipay")) {
          return "支付宝内置浏览器"
        }
        return "非微信内置浏览器"
      }
      window.onload = function () {
        setTimeout(() => {
          alert(is_neizhi())
          alert(navigator.userAgent)
        }, 1000)
      }
    </script>
  </body>
</html>
